<template>
    <div class="circle-add-view view-container">

        <header-module left-custom padding>
            <template #left-con>
                <span style="font-size: 16px">新建朋友圈素材</span>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
                <el-button class="main-btn" size="small" type="primary" @click="onSave">保存</el-button>
                <el-button class="main-btn" size="small" type="primary" @click="onConfirm">保存并发布</el-button>
            </template>

        </header-module>

        <div class="main-content">

            <el-form
                    ref="refForm"
                    :model="formData"
                    :rules="rules"
                    label-position="right"
                    label-width="120px"
                    :inline="true"
                    size="small"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="素材名称" prop="name" style="width: 100%">
                            <el-input v-model="formData.name" placeholder="请输入素材名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="素材类型" prop="type" style="width: 100%">
                            <el-select
                                    v-model="formData.type"
                                    style="width: 100%"
                                    placeholder="请选择素材类型"
                            >
                                <el-option label="科普" value="agent"></el-option>
                                <el-option label="早安寄语" value="agent_person"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="使用日期" prop="date" style="width: 100%">
                            <date-picker
                                    style="width: 100%"
                                    v-model:date="formData.date"
                                    :disabled-date="disabledDate"
                                    placeholder="请选择使用日期"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="建议发圈时间" prop="dateRange" style="width: 100%">
                            <date-range-picker
                                    v-model="formData.dateRange"
                                    :disabled-date="disabledDate"
                                    style="width: 100%;"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容文案" prop="content" style="width: 100%">

                            <div v-for="(item,index) in formData.content" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px">
                                <el-input
                                        v-model="formData.content[index]"
                                        type="textarea"
                                        placeholder="请输入内容文案"
                                />
                                <div style="width: 60px">
                                    <el-icon @click="onDelete(index)" v-if="formData.content.length != 1" style="margin-left: 10px"><delete /></el-icon>
                                    <el-icon @click="onAdd" v-if="index == formData.content.length - 1" style="margin-left: 10px"><circle-plus /></el-icon>
                                </div>
                            </div>

                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="图片素材" prop="files" style="width: 100%">
                            <image-upload v-model:fileList="formData.files" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" style="width: 100%">
                            <el-input
                                    v-model="formData.remark"
                                    type="textarea"
                                    placeholder="请输入备注"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

    </div>
</template>

<script>
import {CirclePlus, Delete} from '@element-plus/icons'
import {useRouter} from 'vue-router'
import {defineComponent, reactive, ref, toRefs} from 'vue'

export default defineComponent({
        name: "index",
        components:{
            Delete,CirclePlus
        },
        setup(){
            const router = useRouter()
            const checkFiles = (rule, value, callback) => {
                if (!value || !value.length) {
                    callback(new Error('请添加图片素材'))
                } else {
                    callback()
                }
            }
            const checkContent = (rule, value, callback) => {
                if (!value || !value.length) {
                    callback(new Error('请输入文案内容'))
                } else {
                    let bo = true
                    for (let i = 0; i < value.length; i++){
                        if (!value[i]){
                            bo = false
                            break
                        }
                    }
                    if (bo){
                        callback()
                    }else {
                        callback(new Error('请完善文案内容'))
                    }

                }
            }
            const rules = ref({
                files:[
                    {required: true, validator: checkFiles,},
                ],
                content:[
                    {required: true, validator: checkContent,},
                ],
                dateRange:[
                    {type: 'date', required: true, message: '请选择发圈时间', trigger: 'change',},
                ],
                date:[
                    {type: 'date', required: true, message: '请选择使用日期', trigger: 'change',},
                ],
                name:[
                    {required: true, message: '请输入素材名称', trigger: 'blur',},
                ],
                type:[
                    {required: true, message: '请选择素材类型', trigger: 'change',},
                ],
            })
            var data = reactive({
                formData:{
                    files:[],
                    remark:'',
                    content:[''],
                    dateRange:[],
                    date:'',
                    name:'',
                    type:'',
                },
                refForm:null,
            })

            const onBack = () => {
                router.back()
            }

            const onSave = () => {
                data.refForm.validate().then((value)=>{
                    if (value){
                        console.log(111111)
                    }else {
                        console.log(222222)
                    }
                })
            }

            const onDelete = (index) => {
                data.formData.content.splice(index,1)
            }

            const onAdd = () => {
                data.formData.content.push('')
            }

            const onConfirm = () => {

            }

            const disabledDate = (time) => {
                return !(time.getTime() > Date.now())
            }

            return{
                ...toRefs(data),
                rules,

                onBack,
                onSave,
                onConfirm,
                disabledDate,
                onDelete,
                onAdd,
            }
        }
    })
</script>

<style scoped>

</style>
